<template>
    <div class="rx-app-design-center" :style="styles">
        <h4>{{i18n('commonEntrances','常用入口')}}</h4>
        <ul class="rx-in-common-use">
            <li @click="itemClick('formDesign')">
                <div class="rx-common-li-bg">
                    <span class="rx-common-use-icon">
                        <img src="../../image/appDesign/form.png">
                    </span>
                    <div class="rx-common-use-title">{{i18n('formDesign','表单设计')}}</div>
                    <p><span>{{i18n('business','收集和存储业务数据，支撑业务流')}}</span></p>
                </div>
            </li>
            <li @click="itemClick('bpmDesign')">
                <div class="rx-common-li-bg">
                    <span class="rx-common-use-icon">
                       <img src="../../image/appDesign/bpm.png">
                    </span>
                    <div class="rx-common-use-title">{{i18n('ProcessDesign','流程设计')}}</div>
                    <p><span>{{i18n('ControlWorkflow','控制工作流程，设计采购、审批等')}}</span></p>
                </div>
            </li>
            <li @click="itemClick('pageCustom')">
                <div class="rx-common-li-bg">
                    <span class="rx-common-use-icon">
                        <img src="../../image/appDesign/page.png">
                    </span>
                    <div class="rx-common-use-title">{{i18n('PageDesign','页面设计')}}</div>
                    <p><span>{{i18n('achieve','用户可以使用组件定义页面，并且组件之间可以实现联动')}}</span></p>
                </div>
            </li>
            <li @click="itemClick('customPortal')">
                <div class="rx-common-li-bg">
                    <span class="rx-common-use-icon">
                         <img src="../../image/appDesign/portal.png">
                    </span>
                    <div class="rx-common-use-title">{{i18n('PortalDesign','门户设计')}}</div>
                    <p><span>{{i18n('Application','可以定义应用的门及门户的授权')}}</span></p>
                </div>
            </li>
            <li @click="itemClick('screen')">
                <div class="rx-common-li-bg">
                    <span class="rx-common-use-icon">
                         <img src="../../image/appDesign/largeScreen.png">
                    </span>
                    <div class="rx-common-use-title">{{i18n('LargeScreen','大屏设计')}}</div>
                    <p><span>{{i18n('LargeScreenMsg','将各种数据以图表、地图、文字、图片等形式展示在大屏上')}}</span></p>
                </div>
            </li>
        </ul>
        <h4>{{i18n('AppDesignNav','应用设计导航')}}</h4>
        <div class="rx-app-design-nav">
            <div style="display: flex;flex-direction: column;">
                <div style="display: flex;">
            <div class="rx-app-data-bind">
                <div class="rx-app-data-bind-content rx-app-item-down">
                    <div class="rx-data-bind-btn">
                        <my-icon type="iconweibiaoti-1_lianjie"/>
                        <span>{{i18n('DatabaseBinding','数据库绑定')}}</span>
                    </div>
                    <div class="rx-app-data-source" >
                        <div class="rx-data-source-item rx-app-item-down" @click="handDataSource()">
                            <span class="rx-data-source-icon">
                                <img src="../../image/appDesign/dataSource.png" alt="">
                            </span>
                            <span class="rx-data-text">{{i18n('DataSource','数据源共享')}}</span>
                            <p>{{i18n('dataSourcesMsg','把平台的数据源共享给应用')}}</p>
                        </div>
                        <div class="rx-data-source-item rx-app-item-down"
                             @click="itemClick('businessEntity')"
                        >
                            <span class="rx-data-source-icon">
                                <img src="../../image/appDesign/business.png" alt="">
                            </span>
                            <span class="rx-data-text">{{i18n('BusinessEntity','业务实体')}}</span>
                            <p>{{i18n('BusinessEntityMsg','创建数据库物理表、管理表的字段')}}</p>
                        </div>
                        <div class="rx-data-source-item rx-app-arrow-right" style="margin-bottom: 10px;"
                             @click="itemClick('businessModel')"
                        >
                            <span class="rx-data-source-icon">
                                <img src="../../image/appDesign/model.png" alt="">
                            </span>
                            <span class="rx-data-text">{{i18n('BusinessModel','业务模型')}}</span>
                            <p>{{i18n('BusinessModelMsg','管理业务实体之间的关系')}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rx-app-form-design">
                <div class="rx-data-bind-btn">
                    <my-icon type="iconbianjiwenzhang_huaban"/>
                    <span>{{i18n('DocumentDesign','单据设计')}}</span>
                </div>
                <div class="rx-app-design-container">
                    <div class="rx-app-design-left">
                                <!--                        <div class="rx-data-source-item" style="margin-bottom: 62px"
                             @click="itemClick('mobileDesign')"
                        >
                            <span class="rx-data-source-icon">
                                <img src="../../image/appDesign/app.png" alt="">
                            </span>
                                                            <span class="rx-data-text">APP表单</span>
                                                            <p>设计移动端表单</p>
                                                        </div>-->
                        <div class="rx-data-source-item rx-app-arrow-left rx-app-arrow-top-right"
                             @click="itemClick('formDesign')"
                        >
                            <span class="rx-data-source-icon">
                                <img src="../../image/appDesign/designForm.png" alt="">
                            </span>
                            <span class="rx-data-text">{{i18n('DragForm','拖拽表单')}}</span>
                            <p>{{i18n('DesignFormsMsg','在线设计单据，发布单据后生成业务实体、业务模型和表单方案')}}</p>
                            <p>{{i18n('initMobileForm','同步初始化手机表单')}}</p>
                            <p>{{i18n('SelectBusiness','选择业务模型反向生成表单')}}</p>
                        </div>
                    </div>
                    <div class="rx-app-design-right">
                        <div class="rx-data-source-item rx-app-arrow-down rx-app-arrow-right2 "
                             @click="itemClick('formPlan')"
                        >
                            <span class="rx-data-source-icon">
                                <img src="../../image/appDesign/formScheme.png" alt="">
                            </span>
                            <span class="rx-data-text">{{i18n('FormScheme','表单方案')}}</span>
                            <p>{{i18n('FormSchemeMsg','对单据进行封装使用，实现单据流程绑定、按钮配置等')}}</p>
                            <p>{{i18n('reverseForm','反向生成的表单，需要手动设置表单方案')}}</p>
                        </div>
                        <div class="rx-app-design-list">
                            <div class="rx-data-source-item rx-app-arrow-bent" @click="itemClick('listDesign')">
                                <span class="rx-data-source-icon">
                                   <img src="../../image/appDesign/designList.png" alt="">
                                </span>
                                <span class="rx-data-text">{{i18n('DesignList','设计列表')}}</span>
                                <p>{{i18n('DesignListMsg','数据查询列表页面的设计，可配置列头、查询条件、按钮等，可配置看板视图和查询视图')}}</p>
                                <p>{{i18n('Configure','PC端和移动端列表一起配置')}}</p>
                            </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="rx-app-flow-design">
                    <div class="rx-data-bind-btn" style="margin-top: -20px;">
                        <my-icon type="iconliuchengtu"/>
                        <span>{{i18n('bpmMan','流程管理')}}</span>
                    </div>
                    <div class="rx-data-source-item" style="margin-top: 20px" @click="itemClick('bpmDesign')">
                        <span class="rx-data-source-icon" >
                            <img src="../../image/appDesign/flowDesign.png" alt="">
                        </span>
                        <span class="rx-data-text">{{i18n('bpmDesign','流程设计')}}</span>
                        <p>{{i18n('bpmDesignMsg','多平台支持，控制工作流程；通过简单的拖拉拽、连线操作，即可设计出一个实用的流程；流程流转到谁、哪些流程还在处理中，都可以清晰查看')}}</p>                    </div>
                </div>
            </div>
            <div class="rx-app-menu-content">
                <div class="rx-app-menus">
                    <div class="rx-data-bind-btn">
                        <my-icon type="iconmanage"/>
                        <span>{{i18n('menu','菜单')}}</span>
                    </div>
                    <div class="rx-app-menu-col">
                        <div class="rx-data-source-item" @click="itemClick('appMenu')">
                            <span class="rx-data-source-icon">
                                <img src="../../image/appDesign/menuManage.png" alt="">
                            </span>
                            <span class="rx-data-text">{{i18n('menuManagement','菜单管理')}}</span>
                            <p>{{i18n('menuManagementMsg','应用下的菜单添加、修改、 删除，去平台后台统一做资源授权。')}}</p>
                        </div>

                    </div>
                </div>
                <div class="rx-app-portal rx-app-arrow-top1" >
                    <div class="rx-data-bind-btn">
                        <my-icon type="iconchakandaping"/>
                        <span>{{i18n('PortalPageScreen','门户/页面/大屏')}}</span>
                    </div>
                    <div class="rx-app-menu-col">
                        <div class="rx-data-source-item" @click="itemClick('customPortal')">
                            <span class="rx-data-source-icon">
                                <img src="../../image/appDesign/homeDesign.png" alt="">
                            </span>
                            <span class="rx-data-text">{{i18n('PortalDesign','门户设计')}}</span>
                            <p>{{i18n('PortalDesignMsg','应用的PC端门户和移动端门户设计')}}</p>
                        </div>
                        <div class="rx-data-source-item" @click="itemClick('pageCustom')">
                            <span class="rx-data-source-icon">
                                 <img src="../../image/appDesign/pageDesign.png" alt="">
                            </span>
                            <span class="rx-data-text">{{i18n('PageDesign','页面设计')}}</span>
                            <p>{{i18n('PageDesignMsg','应用的PC端展示的列表、报表门户等页面')}}</p>
                        </div>
                    </div>
                    <div class="rx-data-source-item" @click="itemClick('screen')">
                        <span class="rx-data-source-icon">
                             <img src="../../image/appDesign/daping.png" alt="">
                        </span>
                        <span class="rx-data-text">{{i18n('LargeScreen','大屏设计')}}</span>
                        <p>{{i18n('LargeScreenMsg','将各种数据以图表、地图、文字、图片等形式展示在大屏上')}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapMutations,mapState} from 'vuex'
import SysAppApi from "@/api/system/core/sysApp";

export default {
    name: "appHome",
    data(){
        return {
            styles:`--pushMenu: '${this.i18n("pushMenu","发布菜单")}';--generate:'${this.i18n("generate","生成")}';--reTable:'${this.i18n("revTable","反向建表")}';--poTable:'${this.i18n("poTable","正向建表")}'`,
            routerObj:{

            }
        }
    },
    computed:{
        ...mapState({
            navigation: state => state.appSetting.navigation,
            frontType: state => state.appSetting.frontType,
        }),
        /**
         * 获取当前的TAB
         * @returns {*}
         */
        navTabs(){
            return this.navigation[this.frontType];
        }

    },
    created() {
        this.getAllApps();
    },
    methods:{
        ...mapMutations({
            setFrontType:'appSetting/setFrontType',
            setAppKey:'appSetting/setAppKey',
            setActiveKey:'appSetting/setActiveKey',
            setNavigation:'appSetting/setNavigation',
            setAllApps:'appSetting/setAllApps'
        }),
        i18n(name, text, key) {
            return this.$ti18(name, text, "appHome", key);
        },
        /**
         * 获取所有的应用，其他的地方可以使用应用ID，找到应用名称。
         */
        getAllApps(){
            //获取所有应用
            SysAppApi.getAllApps().then(res=>{
                var apps={};
                res.map(app=>{
                    apps[app.appId]={appName:app.clientName,}
                });
                this.setAllApps(apps);
            });
        },
        itemClick(name){
            let { appId,appName,appIcon } = this.$route.query ;
            if(name === 'screen'){
                let url = '/screen/?appId='+appId ;
                window.open(url, '_blank');
            }else {
                this.$bus.emit('changeRouter',name);
                this.$router.push({
                    name: name,
                    query:{ appId,appName,appIcon }
                });
            }
        },
        handDataSource(){
            let obj={
                appKey:"form",
                name:"datasourceList",
                title:{"zh-CN":"数据源管理","en-US":"Data Sources"}
            };
            this.openLink(obj,"admin");
        },
        openLink(item,frontType){
            this.setFrontType(frontType);
            this.handNavBar(item);
            this.openWindow(item);
            //存储VUEX状态。
            localStorage.setItem("store", JSON.stringify(this.$store.state));
        },

        openWindow(item){
            let obj=this.$router.resolve(item);
            window.open(obj.href,"_blank" );
        },

        //面包屑
        handNavBar(item) {
            this.setAppKey(item.appKey);
            for (let nav of this.navTabs) {
                if(nav.key === "datasourceList"){
                    this.setActiveKey('datasourceList');
                    return;
                }else if (nav.key === item.name) {
                    this.setActiveKey(item.name)
                    return;
                }
            }
            this.setActiveKey(item.name);
            let obj = { ...this.navigation }
            obj[this.frontType].push({key:item.name,title:item.title,showType:'URL'})
            this.setNavigation(obj)
        },
    }
}
</script>

<style scoped>

.rx-app-design-center{
    max-width: 1388px;
    width: 100%;
    margin: auto;
    padding: 0 10px 10px;
}
.rx-in-common-use{
    width: 100%;
    margin: 0;
    padding: 28px 10px 10px;
    display: flex;
    align-items: center;
    background-color: #eef5ff;
    border-radius: 8px;
    justify-content: space-around;
}
.rx-in-common-use > li{
    flex: 1;
    position: relative;
    box-shadow: 0 8px 10px 0 rgba(46, 86, 239, 0.06);
    border-radius: 10px;
    padding: 1px;
    background-image: linear-gradient(0deg, #e4eeff 0%, #fff 100%);
    margin: 0 10px;
    cursor: pointer;
}
.rx-common-li-bg{
    border: 1px solid transparent;
    border-radius: 10px;
    padding:0 20px 20px;
    background-image: linear-gradient(0deg, #f9fbff 0%, #e4eeff 100%);

}
.rx-common-use-icon{
    display: block;
    width: 64px;
    height: 64px;
    background-color: #ffffff;
    box-shadow: 0px 8px 10px 0px rgba(46, 86, 239, 0.16);
    border-radius: 10px;
    margin-top: -20px;
}
.rx-common-use-title{
    margin-top: 10px;
    font-size: 18px;
}
.rx-in-common-use > li > p,
.rx-in-common-use > li >div> p{
    margin-top: 6px;
    font-size: 12px;
    color:rgba(0,0,0,.65);
    height: 18px;
    position: relative;
}
.rx-in-common-use > li > p >span,
.rx-in-common-use > li >div> p>span{
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rx-app-design-center > h4{
    font-size: 16px;
    font-weight: bold;
    padding: 15px 0 6px;
    margin: 0;
}





.rx-app-design-nav{
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}
.rx-app-design-nav{

}
.rx-app-flow-design{
    position: relative;
    background-color: #ffffff;
    border-radius: 8px;
    border: dashed 2px #7aa9ff;
    padding:0 16px 16px;
    margin-right: 20px;
}
.rx-app-data-bind{
    border-radius: 8px;
    border: dashed 2px #7aa9ff;
    padding:0 16px 16px;
}
.rx-app-data-source{
    margin-top: 40px;
}
.rx-data-bind-btn{
    width: fit-content;
    margin-top: -20px;
    height: 40px;
    line-height: 40px;
    background-image: linear-gradient(0deg, #4285f4 0%, #7aa9ff 100%);
    border-radius: 8px;
    padding: 0 20px;
    color: #fff;
}
.rx-data-bind-btn ::v-deep(.anticon){
    color: #fff;
}
.rx-data-source-item{
    position: relative;
    background-color: #ffffff;
    box-shadow: 0px 4px 16px 0px rgba(46, 86, 239, 0.16);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 38px;
    cursor: pointer;
}

.rx-data-source-item:last-child{
    margin-bottom: 20px;
}
.rx-data-source-item >p {
    font-size: 12px;
    color: #1f2e54;
    margin-top: 2px;
}

.rx-data-source-item:hover{
    color: #4d9eff;
}


.rx-data-text{
    font-weight: bold;
}
.rx-app-flow-design{
    margin-top: 40px;
    background-color: #f2f7ff;
    border-radius: 8px;
    border: dashed 2px #7aa9ff;
}
.rx-app-flow-design .rx-data-source-item{
    margin-bottom: 0;
}

.rx-app-form-design{
    flex: 1;
    margin: 0 20px;
    border: dashed 2px #7aa9ff;
    padding: 0 16px 16px;
    border-radius: 8px;
}

.rx-app-design-container{
    display: flex;
    padding-top: 34px;
}
.rx-app-design-left{
    max-width: 184px;
    width: 100%;
}
.rx-app-design-right{
    flex: 1;
    margin-left: 22px;
    padding-top:22px ;
    margin-top: -22px;
}

.rx-data-source-item>p + p,
.rx-data-source-item>p:has(+p){
    position: relative;
    padding-left: 10px;
}
.rx-data-source-item>p + p:before,
.rx-data-source-item>p:has(+p):before{
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 3px;
    background-color: #4285f4;
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 1px;
}
.rx-data-source-item>p:has(+p):after{
    content: '';
    position: absolute;
    top: 15px;
    border-left: 1px dashed #4285f4;
    bottom: -12px;
    left: 3px;
}
.rx-app-design-list{
    padding:36px 10px 16px;
    background-color: #f2f7ff;
    border-radius: 8px;
}
.rx-app-portal,
.rx-app-menus{
    border: dashed 2px #7aa9ff;
    border-radius: 8px;
}
.rx-app-menu-content{
    display: flex;
    flex-direction: column;
    max-width: 450px;
    width: 100%;
}
.rx-app-menus{
    margin-bottom: 78px;
    padding: 0 16px 16px;
}
.rx-app-portal{
    flex: 1;
    padding: 0 16px 16px;
}
.rx-app-menu-col{
    display: flex;
    margin-top: 30px;
}
.rx-app-menu-col > .rx-data-source-item{
    margin-bottom: 0;
}
.rx-app-menu-col > .rx-data-source-item + .rx-data-source-item{
    margin-left: 20px;
}
.rx-app-portal > .rx-data-source-item{
    margin-top: 36px;
}
.rx-app-design-list .rx-data-source-item:last-child{
    margin-bottom: 0px;
}
.rx-app-data-bind,
.rx-app-item-down{
    position: relative;
}
.rx-app-data-bind::before,
.rx-app-item-down:not(:last-child):before{
    content:'';
    display: inline-block;
    width: 20px;
    height: 40px;
    background:url("../../image/appDesign/arrows_1.png") no-repeat;
    position: absolute;
    bottom: -38px;
    left: 50%;
    transform: translateX(-50%);
}
.rx-app-data-bind::before{
    bottom: -20px;
}
.rx-app-arrow-right:after{
    content:var(--reTable,'反向建表');
    display: inline-block;
    width: 60px;
    height: 42px;
    background:#fff url() no-repeat;
    background-position: 4px bottom;
    position: absolute;
    top: 3px;
    right: -62px;
    font-size: 12px;
    color: #6098fa;
}
.rx-app-arrow-left:before{
    content:var(--poTable,'正向建表');
    display: inline-block;
    width: 60px;
    height: 60px;
    background:#fff url("../../image/appDesign/arrows_3.png") no-repeat;
    background-position: left center;
    position: absolute;
    bottom: 0px;
    left: -50px;
    font-size: 12px;
    color: #6098fa;
}

.rx-app-menu-col{
    display: flex;
}
.rx-app-menu-col > .rx-data-source-item{
    flex: 1;
}
.rx-app-arrow-bent:after{
    content:var(--pushMenu,'发布菜单');
    display: inline-block;
    width: 152px;
    height: 48px;
    background: url("../../image/appDesign/arrows_6.png") no-repeat;
    background-position: right center;
    background-size: 100% 100%;
    position: absolute;
    top: -87px;
    right: -97px;
    text-align: center;
    color: #6098fa;
    font-size: 12px;
    text-indent: 4em;
}
.rx-app-arrow-down:before{
    content: var(--generate,'生成');
    display: inline-block;
    width: 58px;
    height: 40px;
    background:url("../../image/appDesign/arrows_1.png") no-repeat;
    background-position: left center;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: right;
    line-height: 40px;
    color: #6098fa;
    font-size: 12px;
}
.rx-app-arrow-right2:after{
    content: var(--pushMenu,'发布菜单');
    display: inline-block;
    width: 62px;
    height: 46px;
    background:#fff url('../../image/appDesign/arrows_4.png') no-repeat;
    background-position: 9px bottom;
    position: absolute;
    top: 0;
    right: -58px;
    text-align: center;
    color: #6098fa;
    font-size: 12px;
}
.rx-app-portal{
    position: relative;
}
.rx-app-arrow-top1:before{
    content: var(--pushMenu,'发布菜单');
    display: inline-block;
    width: 76px;
    height: 46px;
    line-height: 46px;
    background: url("../../image/appDesign/arrows_2.png") no-repeat;
    background-position: 0 center;
    position: absolute;
    top: -67px;
    left: 84px;
    text-align: right;
    color: #6098fa;
    font-size: 12px;
}

.rx-data-source-item{
    position: relative;
}
.rx-data-source-item > .rx-data-source-icon{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: -20px;
    right: 10px;
}
.rx-data-bind-btn > span{
    padding-left: 6px;
}
</style>